<template>
  <el-menu @select="select" :default-active="active" background-color="#99ccff"
      text-color="#000"
      active-text-color="slategrey">
    <template v-for=" d in data">
      <el-submenu :key="d.path" v-if="d.children && d.meta.isShow" :index="d.name">
        <template #title>
          <i v-if="d.meta.icon" :class="d.meta.icon"></i>
          <i v-else class="el-icon-picture-outline iicon"></i>
          {{d.meta.menuName}}
        </template>
        <SideMenu :data="d.children"></SideMenu>
      </el-submenu>
      <el-menu-item :index="d.name" :key="d.path" v-else-if="d.meta.isShow">
        <i v-if="d.meta.icon" :class="d.meta.icon"></i>
        <i v-else class="el-icon-picture-outline iicon"></i>{{d.meta.menuName}}
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script>
import '../assets/font_1664097_muii1xp4zw/iconfont.css';

export default {
  props: ['data'],
  name: 'SideMenu',
  data() {
    return {
      active: '',
      menus: [],
    };
  },
  created() {
    this.active = this.$route.name;
  },
  methods: {
    select(name) {
      this.$router.push({
        name,
      }).catch(() => {});
    },
  },
};
</script>
